<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车 生日蛋糕网上订购 生日蛋糕预订</title>
		<link rel="stylesheet" href="css/header.css" type="text/css">
		<link rel="stylesheet" href="css/shop1.css" type="text/css">
	</head>
	<body>
		<div class="header">
		  <div class="header-nav">
		    <a class="header-logo" href="index.html">
		      <img src="img\logo.png" >
		    </a>
		    <ul class="nav-box">
		      <li><a href="index.html">首页</a> </li>
		      <li><a href="https://www.lecake.com/SH/category-5-1.html">全国送</a> </li>
		      <li><a href="firm.html">企业专区</a> </li>
		    </ul>
		 
		  <div class="right-city-user">
					<ul>
						<li><a href="index.html" id="wechat">微信小程序</a>
					<div id="shift-in">
						<img src="img/wechat.jpg"/>
					</div></li>
						<li class="city-dropdown">
						                    <div class="current-city">城市</div>
						                    <div class="city-menu">
						                        <ul>
						                            <li><a href="#">北京</a></li>
						                            <li><a href="#">上海</a></li>
						                            <li><a href="#">广州</a></li>
						                            <li><a href="#">深圳</a></li>
						                            <li><a href="#">成都</a></li>
						                            <!-- 更多城市选项 -->
						                        </ul>
						                    </div>
						                </li>
						<li><a class="header-message" href="index.html">消息</a></li>
						<li><span class="not-login">
		              <a href="login.html">登录</a>
		              							/
		              							<a href="zhuce.html">注册</a>
							</span>
						</li>
						<li><a href="index.html" class="header-cart" id="cart-count-icon">购物车</a></li>
					</ul>
		   
		 
		    
		    
		    
		  </div> </div>
		</div>
		<div class="content-box" >
			<div class="box-main">
				<ul class="box-ul">
					<li class="ul-goods">商品</li>
					<li class="ul-birthday-card">生日牌</li>
					<li class="ul-unit-Price">单价</li>
					<li class="ul-number">数量</li>
					<li class="ul-money">金额</li>
				</ul>
				<div class="box-body" id="app">
					<table>
					<div class="goods-body">
						<tr class="cart-object-item scene_area ">
						    <td class="goods-img">
						        <a href="goods-001.html">
						            <img src="img/goods-001-1.jpg" width="88px" height="48px">
						        </a>
						    </td>
						    <td class="goods-cake">
						        <div>
						            <h4 class="cart-title">
										<a href="goods-001.html">Tea Time 浅草（龙井茶）</a>
						            </h4>
						            <span class="goods-spec">规格：<span>454g(1.0磅)</span></span> <br> <br>
						            <span class="goods-laid">
						                赠送5套餐具
						            </span>
								
						        </div>
						    </td>
						    <td class="select-birthday-td">
						        <div class="select-birthday">
						            <!-- <input type="hidden" name="birthday_card[39566]" value="" data-name="Tea Time 浅草（龙井茶）">
						            <div class="action-birthday_card">选择生日牌</div>
						            <ul class="action-birthday-options">
						            <li class="birthday-card-option">生日快乐</li>
						            <li class="birthday-card-option">HappyBirthday</li>
						            <li class="birthday-card-option">永远18岁</li>
						            <li class="birthday-card-option">节日快乐</li>
						            <li class="birthday-card-option">纪念日快乐</li>
						            </ul> -->
									  <select name="address">
									  <option>生日快乐</option>
									  <option>HappyBirthday</option>
									  <option>永远18岁</option>
									  <option>纪念日快乐</option>
									  <option>我是奶龙！！！</option>
									</select>
						        </div>
							</td>
						    <td class="cart-unit-Price">
						                    ¥268.00
						                </td>
						                <td class="number-li">
						                    <div class="number quantity-update">
						                        <input type="button" class="minus" @click="decreaseQuantity" value="−">
						                        <input type="text" v-model="num" class="quantity _quantity" name="quantity[39566]" readonly>
						                        <input type="button" class="plus" @click="increaseQuantity" value="+">
						                    </div>
						                </td>
						                <td class="money">
						                    <span>{{ totalPrice }}</span>
						                </td>
						                <!-- <td class="delete">
						                    <a href="#" data-action="remove_from_cart" style="border: none;">
						                        <i></i>
						                    </a>
						                </td> --></tr>
					</div>
				</div>
				</table>
				
			</div>
		</div>
		
		<script src="js/vue.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.4(1).js" ></script>
		<script type="text/javascript" src="js/header.js"></script>
		

		<script>

			new Vue({
			    el: '#app',
			    data: {
			        num: 0, // 初始数量
			        price: 268.000, // 商品单价
			        maxQuantity: 99, // 最大购买数量
			    },
			    computed: {
			        // 计算总金额
			        totalPrice() {
			            return (this.num * this.price).toFixed(2); // 格式化为两位小数
			        }
			    },
			    methods: {
			        // 增加数量
			        increaseQuantity() {
			            if (this.num < this.maxQuantity) {
			                this.num++;
			            }
			        },
			        // 减少数量
			        decreaseQuantity() {
			            if (this.num > 0) {
			                this.num--;
			            }
			        }
			    }
			});
			
		</script>
	</body>

</html>